<template>
	<view class="goods-info-txt">
		<view class="desc-box" v-for="(item,index) in goosDesc" :key="index" >
			<view class="i-title">
				<view class="item" :class="index == titleIndex ? 'active' : ''" @click="ontitle(item,index)"  >
					{{item.desc.title}}
					<!-- 空盒子添加线条 -->
					<view :class="index == titleIndex ? 'active-s' : ''"></view>
				</view>
			</view>
			<view class="i-txt" v-if="index == titleIndex" >
				<view  v-for="(items,indexs) in item.desc.list" :key="indexs">
					<view class="items-title" v-if="items.desc">{{items.desc}}</view>
					<image :src="items.img" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["goosDesc"],
		data() {
			return {
				titleIndex : 0,
			};
		},
		created() {
			
		},
		methods:{
			ontitle(item,index)
			{
				if(this.titleIndex == index) return;
				this.titleIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.goods-info-txt
	{
		padding: 10px;
		padding-left: 20px;
		display: flex;
		position: relative;
		font-size: 14px;
		.desc-box
		{
			
			.i-title
			{
				padding-bottom: 6px;
				.active
				{
					color: #3388FF;
				}
				.item
				{
					cursor: pointer;
					margin-right: 10px;
					.active-s
					{
						width: 20px;
						margin: 0 auto;
						border-bottom: 2px solid #3388FF;
					}
				}
			}
			.i-txt
			{
				position: absolute;
				left: 20px;
				.items-title
				{
					padding-bottom: 6px;
				}
			}
		}
		
	}
</style>
